<template>
  <div class="about">
    <template v-if="isEdit">
      <h2>{{ todo.content || "....." }}</h2>
      <div>{{ todo.description || "......" }}</div>
    </template>
    <template v-else>
      <input type="text" v-model="todo.content" />
      <textarea v-model="todo.description"></textarea>
    </template>

    <div>
      <button class="btn btn-info" @click="isEditAble">{{ BtnText }}</button>
      <button class="btn btn-danger" @click="isdel">删除</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "H",
  data() {
    return {
      id: null,
      todo: {},
      isEdit: false
    };
  },
  computed: {
    BtnText() {
      return this.isEdit ? "保存" : "修改";
    }
  },
  created() {
    this.id = this.$route.params.id;
    axios({
      method: "GET",
      url: `https://api.yizhanketang.cn/api/v1/todos/${this.id}`
    }).then(res => {
      this.todo = res.data.data;
      console.log(res.data.data);
    });
  },
  methods: {
    isdel() {
      axios({
        method: "POST",
        url: `https://api.yizhanketang.cn/api/v1/todos/${this.id}/delete`
      }).then(() => {
        alert("确定删除吗");
      });
    },
    isEditAble() {
      if (!this.isEdit) {
        this.isEdit = true;
      } else {
        axios({
          method: "POST",
          url: `https://api.yizhanketang.cn/api/v1/todos/${this.id}`,
          data: {
            content: this.todo.content,
            description: this.todo.description
          }
        }).then(() => {
          this.isEdit = false;
        });
      }
    }
  }
};
</script>
